<template>
  <div class="userInfo">
    <div class="header">
      <span class="title">基本信息</span>
      <span class="op">
        <span @click="type='edit'"><i class="el-icon-edit"></i>修改</span>
        <span @click="submit"><i class="el-icon-folder-checked"></i>保存</span>
      </span>
    </div>
    <userBaseInfo ref="userBaseInfo" :type="type" class="userBaseInfo"></userBaseInfo>
  </div>
</template>

<script>
import userBaseInfo from "@/views/userCenter/userInfo/module/userBaseInfo";
export default {
  name: "userInfo",
  components:{
    userBaseInfo
  },
  data(){
    return {
      type:'see',
      termList:[],
    }
  },
  mounted() {
    this.getCustomerInfo()
  },
  methods:{
    getCustomerInfo(){
      this.$api.getCustomerInfo().then(res=>{
        this.$refs.userBaseInfo.setData(res.data)
      })
    },
    submit(){
      console.log(this.$refs.userBaseInfo.form)
      if(this.type!='edit'){
        return
      }
      this.$refs.userBaseInfo.validate().then(res=>{
        let params = this.$refs.userBaseInfo.form
        this.$confirm('确定修改资料？').then(res=>{
          this.$api.editCustomerInfo(params).then(res=>{
            this.$message.success('保存成功')
          })
        }).catch(() => {})
      })
    },
  },
}
</script>

<style scoped lang="scss">
.userInfo{
  padding: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 60px);
  font-size: 14px;
  overflow-y: auto;
  background-color: white;
  .userBaseInfo{
    margin-top: 20px;
  }
  .header{
    display: flex;
    justify-content: space-between;
    .title{
      border-left: 6px solid #0F47B8;
      display: inline-block;
      padding-left: 10px;
    }
    .op{
      span{
        cursor: pointer;
        display: inline-block;
        margin-left: 30px;
        color: #0F47B8;
        i{
          font-size: 18px;
        }
      }
    }
  }
}
</style>